
<template>
  <scroll-view scroll-y>
    <view class="category-list">
      <navigator class="category-item" v-for="v in category" :key="v.id" :url="`/pages/imgCategory/index?id=${v.id}`">
        <image :src="v.cover" mode="aspectFill" />
        <view class="cate-name">{{v.name}}</view>
      </navigator>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      category: []
    }
  },
  mounted() {
    uni.setNavigationBarTitle({ title: '详情' })
    this.loadcategory()
  },
  methods: {
    async loadcategory() {
      const { res } = await this.request({ url: '/image/v1/vertical/category' })
      this.category = res.category
    }
  }
}
</script>

<style  lang='scss' scoped>
.category-list {
  height: calc(100vh - 36px);

  display: flex;
  flex-wrap: wrap;

  image {
    height: 240rpx;
  }

  .category-item {
    width: 33.33%;
    border: 5rpx solid #fff;
    position: relative;
  }
  .cate-name {
    position: absolute;
    padding-left: 20rpx;
    bottom: 0;
    width: 100%;
    height: 50rpx;
    line-height: 50rpx;
    background-image: linear-gradient(to right top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    font-size: 40rpx;
    color: #fff;
  }
}
</style>